*{margin: 0;padding:0}
body{
    background: #000;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
@keyframes move {
	0%,
	100% {
		background-position-x: left;
	}
	50% {
		background-position-x: right;
	}
}
.shape-container {
    width: 500px;
    height: 500px;
    position: relative;
   

    div {
        position: absolute;
        width: 100%;
        height: 100%;
        animation: move 5s infinite;
        background: linear-gradient(135deg, red, orange, green, blue, purple) left center/400% 400% ;
    }

    // .shape1{
    //     background: #999933;
    //     clip-path: polygon(50% 25%, 56% 24%, 44% 24%);
        
    // }

    .shape2{
        clip-path: polygon(35% 16%, 50% 25%, 44% 24%);
    }

    .shape3{
        clip-path: polygon(65% 16%, 50% 25%, 56% 24%);
    }

    .shape4{
        clip-path: polygon(35% 16%, 44% 24%, 25% 24%);
    }
    
    .shape5{
        clip-path: polygon(65% 16%, 56% 24%, 75% 24%);
    }

    .shape6{
        clip-path: polygon(20% 13%, 35% 16%, 25% 24%);
    }

    // .shape6{
    //     background: #993300;
    //     clip-path: polygon(15% 13%, 35% 16%, 25% 24%);
    // }

    // .shape7{
    //     background: #993300;
    //     clip-path: polygon(85% 13%, 65% 16%, 75% 24%);
    // }

    .shape8{
        clip-path: polygon(10% 13%, 20% 13%, 25% 24%);
    }

    // .shape9{
    //     background: #996600;
    //     clip-path: polygon(95% 22%, 85% 13%, 75% 24%);
    // }

    .shape10{
        clip-path: polygon(4% 20%,10% 13%, 25% 24%);
    }

    // .shape11{
    //     
    //     clip-path: polygon(94% 35%, 95% 22%, 75% 24%);
    // }

    .shape12{
        clip-path: polygon(5% 32%,4% 20%, 25% 24%);
    }

    .shape14{
        
        clip-path: polygon(5% 32%, 25% 24%, 28% 33%);
    }

    .shape16{
        
        clip-path: polygon(44% 24%, 25% 24%, 28% 33%);
    }

    .shape18{
        
        clip-path: polygon(44% 24%, 50% 25%, 28% 33%);
    }

    .shape20{
        
        clip-path: polygon(50% 70%, 50% 25%, 28% 33%);
    }

    .shape22{
        
        clip-path: polygon(7% 40%, 28% 33%, 5% 32%);
    }

    .shape24{
        clip-path: polygon(7% 40%, 28% 33%, 5% 32%);
    }

    .s1{
        clip-path: polygon(25% 25%, 25% 37.5%, 37.5% 25%);
    }

    .s2{
        clip-path: polygon(38.5% 38.5%, 25% 37.5%, 37.5% 25%);
    }

    .s3{
        clip-path: polygon(50% 25%, 38.5% 38.5%, 37.5% 25%);
    }

    .s4{
        clip-path: polygon(25% 50%, 38.5% 38.5%, 25% 37.5%);
    }

    .s5{
        clip-path: polygon(25% 65%, 25% 50%, 38.5% 62.5%);
    }

    .s6{
        clip-path: polygon(25% 75%, 25% 65%, 38.5% 62.5%);
    }

    .s7{
        clip-path: polygon(38.5% 75%, 25% 75%, 32.1% 68.5%);
    }

    .s8{
        clip-path: polygon(50% 75%, 38.5% 75%, 52% 68.5%);
    }

    .s9{
        clip-path: polygon(43.3% 58%, 38.5% 75%, 32.1% 68.5%);
    }

    .s10{
        clip-path: polygon(25% 50%, 38.5% 62.5%, 43.3% 58%);
    }

    .s11{
        clip-path: polygon(50% 75%, 53.2% 65%, 65% 75%);
    }

    .s12{
        clip-path: polygon(43.3% 58%, 38.5% 75%, 52% 68.5%);
    }

    .s13{
        clip-path: polygon(75% 75%, 65% 75%, 75% 65%);
    }

}
    